<template>
  <!-- 带方块悬浮板块 -->
  <div class="infoBox container-fluid">
    <div class="row justify-content-center">
      <div class="col-9 ">
        <!-- title盒子 -->
        <div class="row justify-content-center">
          <div class="col-12 titleBox">
            <p>容器化支持</p>
            <p>从基础设施到前后端Cereshop 全面提供了容器化的支持 </p>
          </div>
        </div>
        <!-- 选项盒子 -->
        <div class="row justify-content-md-between justify-content-center">
          <!-- 单个详情 -->
          <div class="col-md-3 col-11 detailBox">
            <div class="imgBox">
              <img src="http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/95e4bb5c-75fa-4e8f-820c-e980b596d08f.png" />
              <p>Docker</p>
            </div>
            <p>完整的Docker镜像制作及推送支持</p>
          </div>
          <!-- 单个详情 -->
          <div class="col-md-3 col-11 detailBox">
            <div class="imgBox">
              <img src="http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/a74a15bb-14ac-4b74-aed7-8e7124597a34.png" />
              <p>Kubernetes</p>
            </div>
            <p>提供完整K8S编排文件及自动化部署脚本</p>
          </div>
          <!-- 单个详情 -->
          <div class="col-md-3 col-11 detailBox">
            <div class="imgBox">
              <img src="http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/3cf37dae-7c9e-439b-b6b0-5caaad7b03fc.png" />
              <p>DevOps</p>
            </div>
            <p>基于容器化按需实现可持续集成方案</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {

}

</script>
<style lang="less" scoped>
.infoBox {
  padding: 7.44rem 0;
  .titleBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    p {
      text-align: center;
    }
    p:nth-child(1) {
      font-size: 48px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
    p:nth-child(3) {
      padding: 0 0;
      margin: 0 0;
    }
  }
  .detailBox {
    cursor: pointer;
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .imgBox {
      position: relative;
      transition: all 0.6s;
      width: 100%;
      img {
        width: 100%;
      }
      p {
        margin: 0 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #ffffff;
        position: absolute;
        font-size: 2.25rem;
      }
    }
    .imgBox:hover {
      margin-top: -2.5rem;
      p {
        text-decoration: underline;
      }
    }
    p {
      white-space: nowrap;
      text-align: center;
      margin-top: 2rem;
      font-size: 1.13rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
  }
}
</style>